<template>
  <div>
    <ul class="product">
      <li v-for="item in goodsListApply" :key="item.id" @click="toProdoctDetails(item.id)">
        <img :src="item.list_pic_url" alt="" />
        <p class="title van-ellipsis">{{item.name}}</p>
        <div class="price">￥{{item.retail_price}}元</div>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  props:['goodsListApply'],
  data() {
    return {};
  },
  methods:{
    //点击携带参数跳转
    toProdoctDetails(id){
        this.$router.push('/productdetails?id='+id),
         setTimeout(()=>{
            this.$router.go(0);
        },10)
    }
  }
};
</script>
 
<style lang = "less" scoped>
@import url("../../assets/css/common.less");
.product {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* background-color: #ccc; */
  li {
    width: 49.5%;
    background-color: white;
    text-align: center;
    margin-bottom: .03rem;
    img {
      width: 100%;
    }
    .title {
      font-size: 0.2rem 0;
      padding: .1rem;
    }
    .price{
        padding: .1rem 0;
        color: @red;
    }
  }
}
</style>